<template>
	<div class="dd">
		<div class="echarts" style="width:60%;height:500px; " ref="chart"></div>
    <div class="echarts" style="width:35%;height:500px;" ref="sex"></div>
	</div>
</template>

<script>
    //局部引用
	const echarts = require('echarts');
	export default{
		data(){
      return {
        list:[],
        tt:[],
      }
		}
    , created(){
    this.sexEatchrts()

  
     
    },
	methods: {
    sexEatchrts(){
      this.$http("eachrts/sex").then(res=>{
        this.list=res
        this.$nextTick(()=>{
          this.aa()
        })
           
      })
      this.$http("eachrts/type").then(res=>{
        this.tt=res
        
          this.type()

           
      })
    },type(){
      var name=[];
      var value=[];
      for(var a=0;a<this.tt.length;a++){
          name[a]=this.tt[a].t_name
          value[a]=this.tt[a].value
      }
      console.log(name)
       console.log(value)
      let myChart = echarts.init(this.$refs.chart);
      myChart.setOption( {
         title: {
            text: '类型播放量',
            left: 'center'
          },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: name,
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Direct',
      type: 'bar',
      barWidth: '60%',
      data: value
    }
  ]
})
    },aa(){
      let myChart = echarts.init(this.$refs.sex);
      myChart.setOption({
          title: {
            text: '用户比例',
            subtext: 'Fake Data',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: this.list
              ,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        });
    }
	},
	//一加载页面就调用
	mounted () {

   
 
	}
	}
</script>
<style>
.dd{
/* padding: 10px 20px; */
}
.echarts{
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  float: left;
  margin: 20px 10px;
  
}
</style>

